<template>
    <div v-if="data">
        <!--  标题  -->
        <div class="title">胖猫电商购物</div>
        <!--  搜索框  -->
        <van-search
                v-model="search"
                shape="round"
                background="#C92519"
                clearable
                placeholder="请输入商品名称"
                @focus="toPage('search')"
        />
        <!--  轮播图  -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="image in data.data.banner" :key="image.id">
                <img :src="image.url">
            </van-swipe-item>
        </van-swipe>
        <!--  宫格导航栏  -->
        <div style="background: #fff">
            <van-grid :border="false" :column-num="5">
                <van-grid-item v-for="(channel, chaIdx) in data.data.channel" :key="channel.id" :icon="channel.iconUrl"
                               :text="channel.name" @click="goClassify(channel.id, chaIdx)"/>
            </van-grid>
        </div>
        <!--  新品推荐  -->
        <div class="newGoodsList">
            <p>新品推荐</p>
            <van-grid :border="false" :column-num="3">
                <van-grid-item @click="toGoods(newGoodsList.id)" v-for="newGoodsList in data.data.newGoodsList"
                               :key="newGoodsList.id">
                    <van-image width="90" height="90" :src="newGoodsList.picUrl"/>
                    <div>{{ newGoodsList.name }}</div>
                    <div class="price">￥{{ newGoodsList.retailPrice }}</div>
                </van-grid-item>
            </van-grid>
        </div>
        <!--  优惠券  -->
        <div class="quan">优惠券</div>
        <div class="coupon" v-for="quan in data.data.couponList" :key="quan.id">
            <div class="coupon_left">
                <div class="name">{{quan.name}}</div>
                <div class="txt">
                    <div class="price">
                        <span>￥</span>
                        <span>{{ quan.discount }}</span>
                    </div>
                    <div class="desc">
                        <span>{{ quan.desc }}</span>
                        <span>满{{ quan.min }}元可用</span>
                    </div>
                </div>
            </div>
            <div class="coupon_right">立即领取</div>
        </div>
        <!--  团购专区  -->
        <div class="grouponList">
            <p>团购专区</p>
            <div class="commodity" @click="toGoods(grouponList.id)" v-for="grouponList in data.data.grouponList"
                 :key="grouponList.id">
                <van-image width="140" height="140" :src="grouponList.picUrl"/>
                <div class="count">
                    <div class="txt">{{ grouponList.name }}</div>
                    <div class="price">
                        <span style="margin-right: 5px">原价：</span><s>￥{{ grouponList.counterPrice }}</s>
                        <span style="margin-right: 5px;margin-left: 28px">现价：</span><span
                            style="color: red">￥{{ grouponList.retailPrice }}</span>
                    </div>
                    <div class="groupPrice">
                        <span style="margin-right: 9px">团购仅需：</span>
                        <span style="color: red">￥{{ grouponList.retailPrice }}</span>
                    </div>
                    <van-button type="danger">立即购买</van-button>
                </div>
            </div>
        </div>
        <!--  热门商品  -->
        <div class="hotGoodsList">
            <p>热门商品</p>
            <div class="commodity" @click="toGoods(hotGoodsList.id)" v-for="hotGoodsList in data.data.hotGoodsList"
                 :key="hotGoodsList.id">
                <van-image width="142" height="140" :src="hotGoodsList.picUrl"/>
                <div class="count">
                    <div class="txt">
                        {{ hotGoodsList.name }}
                    </div>
                    <div class="desc">
                        {{ hotGoodsList.brief }}
                    </div>
                    <div class="price">
                        <span style="margin-right: 8px">原价：</span><s>￥{{ hotGoodsList.counterPrice }}</s>
                        <span style="margin-left: 28px;margin-right: 9px">现价：</span><span
                            style="color: red">￥{{ hotGoodsList.retailPrice }}</span>
                    </div>
                    <van-button type="danger">立即购买</van-button>
                </div>
            </div>
        </div>
        <!--  Tabbar标签底栏  -->
        <van-tabbar v-model="active" active-color="#F6412D" :fixed="true" :border="true">
            <van-tabbar-item replace to="/index" icon="home-o">主页</van-tabbar-item>
            <van-tabbar-item replace to="/classify" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item replace to="/user" icon="contact">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                search: '',
                active: 0,
                data: null
            }
        },
        methods: {
            onChange(index) {
                this.current = index;
            },
            toPage(name) {
                this.$toPage(name)
            },
            goClassify(id,active) {
                // 点击一级导航去往对应分类页面
                this.$router.push({
                    name: 'recommend',
                    params: {
                        id: id,
                        active: active
                    }
                })
            },
            toGoods(id) {
                // 点击商品去往详细页面
                this.$router.push({
                    name: 'goodsmsg',
                    query: {
                        id: id
                    }
                })
            }
        },
        async created() {
            let get1 = null
            get1 = await this.$get('home/index')
            this.data = get1.data
            console.log(get1)
        }
    }
</script>

<style lang="less" scoped>
  // 标题
  .title {
    width: 375px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    text-align: center;
  }

  // 搜索框
  .van-search {
    height: 37px;
    line-height: normal;

    .van-cell--borderless {
      height: 25px;
      line-height: normal;
    }
  }

  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  // 新品推荐
  .newGoodsList {
    width: 375px;
    font-size: 14px;

    p {
      margin-top: 8px;
      margin-bottom: 6px;
      margin-left: 14px;
      font-weight: 500;
    }

    .van-image__img {
      width: 90px;
      height: 90px;
    }

    .price {
      color: red;
    }
  }

  // 团购专区
  .grouponList {
    margin-top: 14px;
    width: 375px;
    height: 503px;

    p {
      margin-top: 10px;
      margin-bottom: 14px;
      margin-left: 14px;
      font-size: 14px;
      font-weight: 500;
    }

    .commodity {
      margin-top: 14px;
      margin-left: 14px;
      width: 351px;
      height: 140px;
      display: flex;
      flex-direction: row;

      .count {
        margin-left: 10px;
        font-size: 12px;

        .txt {
          width: 201px;
          height: 34px;
          font-size: 16px;
        }

        .price {
          margin-top: 14px;
        }

        .groupPrice {
          margin-top: 14px;
        }

        .van-button--danger {
          margin-top: 18px;
          margin-left: 131px;
          width: 80px;
          height: 20px;
          border-radius: 5px;
          font-size: 12px;
          background-color: #F6412D;
        }
      }
    }
  }

  .hotGoodsList {
    margin-top: 14px;
    width: 375px;
    height: 996px;

    p {
      margin-top: 10px;
      margin-bottom: 30px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
    }

    .commodity {
      margin-left: 9px;
      margin-bottom: 14px;
      width: 356px;
      height: 140px;
      display: flex;
      flex-direction: row;

      .count {
        margin-left: 10px;
        font-size: 12px;

        .txt {
          width: 201px;
          height: 34px;
          font-size: 16px;
        }

        .desc {
          color: #646566;
        }

        .price {
          margin-top: 40px;
        }

        .van-button--danger {
          margin-top: 18px;
          margin-left: 131px;
          width: 80px;
          height: 20px;
          border-radius: 5px;
          font-size: 12px;
          background-color: #F6412D;
        }
      }
    }
  }

  // 优惠券
  .quan {
    margin-top: 14px;
    margin-bottom: 14px;
    margin-left: 14px;
    font-size: 14px;
  }
  .coupon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 10px;
    margin-bottom: 14px;
    width: 350px;
    border-radius: 10px;
    border: 1px dashed #e5004f;
    background-color: #F7DBCD;

    .coupon_left {
      margin-left: 40px;

      .name {
        margin: 5px 0;
        font-size: 12px;
        color: red;
      }
      .txt {
        display: flex;
        flex-direction: row;

        .price{
          color: #E5004F;
          font-size: 12px;
        }
        .price>span:last-child {
          font-size: 30px;
        }
        .desc {
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          font-size: 12px;
        }
        .desc>span:first-child {
          color: #E5004F;
        }
      }
    }

    .coupon_right {
      margin-right: 20px;
      line-height: 64px;
      font-size: 16px;
    }
  }

  //.coupon_left {
  //   margin-left: 40px;
  // }
  //.coupon_right {
  //  margin-right: 20px;
  //  line-height: 64px;
  //}
  //.title {
  //  margin: 5px 0;
  //  font-size: 12px;
  //  color: red;
  //}
  //.txt {
  //  display: flex;
  //  flex-direction: row;
  //}
  //.price{
  //  color: #E5004F;
  //  font-size: 12px;
  //}
  //.price>span:last-child {
  //  font-size: 30px;
  //}
  //.desc {
  //  margin-left: 10px;
  //  display: flex;
  //  flex-direction: column;
  //  font-size: 12px;
  //}
  //.desc>span:first-child {
  //  color: #E5004F;
  //}
</style>
